<template>
  <div class="container">
    <!--   data-0-top="opacity: 0;left: 100px;"
      data-200-top="opacity: 1;left: 0px;" -->

    <!-- 
          向右边
          class="prel secwrap"
        data-0-top="opacity: 0;left: 100px;"
        data-100-top="opacity: 1;left: 0px;" -->

    <!-- 向左边 
        left: -500px;  right:500px;

        class="prel secwrap"
        data-center-center="opacity: 1;left: 0;"
        data-0-bottom="opacity: 0;left: -500px;"
        -->

    <!-- 三个图片   左 left:-400px;  下 bottom:-400px  右 right:-400px -->

    <section>
      <!-- 向右边 -->
      <div class=" secwrap">
        <h1
          class="prel "
          data-0-top="opacity: 0;left: -300px;"
          data-100-top="opacity: 1;left: 0px;"
        >
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis, saepe!
        </h1>
        <span
          class="prel "
          data-0-top="opacity: 0;right: -300px;"
          data-center-center="opacity: 1;right: 0px;"
          >Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus,
          nesciunt, dignissimos voluptatem modi omnis aliquam libero, enim iure
          eveniet voluptate molestias nam consectetur ipsa beatae. Ipsa
          veritatis ipsum at. Quidem facere ipsam vel illo cumque eveniet,
          officiis ipsa suscipit corrupti.</span
        >
      </div>
    </section>
    <section>
      <!-- <div
        class="prel secwrap"
        data-center-center="opacity: 1;left: 0;"
        data-0-bottom="opacity: 0;left: -500px;"
      >
      </div> -->

      <div class="gridwrap">
        <div
          class="oneitem prel"
          data-center-center="opacity: 1;left: 0;"
          data-0-bottom="opacity: 0;left: -500px;"
        ></div>
        <div
          class="oneitem prel"
          data-center-center="opacity: 1;bottom: 0;"
          data-0-bottom="opacity: 0;bottom: -500px;"
        ></div>
        <div
          class="oneitem prel"
          data-center-center="opacity: 1;right: 0;"
          data-0-bottom="opacity: 0;right: -500px;"
        ></div>
      </div>
    </section>
    <section>
      <div class="secwrap ">
        <h1
          class="prel "
          data-center-center="opacity: 1;top: 0;"
          data-0-bottom="opacity: 0;top: -500px;"
        >
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis, saepe!
        </h1>
        <span
          class="prel "
          data-center-center="opacity: 1;bottpm: 0;"
          data-0-bottom="opacity: 0;bottpm: -500px;"
          >Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus,
          nesciunt, dignissimos voluptatem modi omnis aliquam libero, enim iure
          eveniet voluptate molestias nam consectetur ipsa beatae. Ipsa
          veritatis ipsum at. Quidem facere ipsam vel illo cumque eveniet,
          officiis ipsa suscipit corrupti.</span
        >
      </div>
    </section>
  </div>
</template>

<script>
// import Parallax from "vue-parallaxy";
import skrollr from "skrollr";

export default {
  name: "skrollr",
  components: {
    // Parallax
  },
  data() {
    return {
      wrappara: "wrappara",
      skrollrobj: null
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   skrollr.init();

    this.$nextTick(() => {
      this.skrollrobj = skrollr.init({
        forceHeight: false,
        smoothScrolling: true,
        smoothScrollingDuration: 500,
        easing: {
          vibrate: function(p) {
            return Math.sin(p * 10 * Math.PI);
          }
        }
      });
    });

    // alert("mounted");
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  //   overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  //   overflow-x: hidden;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  //   height: 100vh;
}

section {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  //   border-bottom: 10px solid white;
  background: cornflowerblue;
}

section:nth-of-type(2) {
  //   background: pink;
  //   background-image: linear-gradient(135deg, blue 60%, black 60.5%);
  //   蓝色 #142831     浅蓝 #5B9CF8
  background-image: linear-gradient(#142831 30.5%, #5b9cf8 30%);
}
section:nth-of-type(3) {
  background: cornflowerblue;
}
.prel {
  position: relative;
}

.secwrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 50px;

  h1 {
    font-size: 40px;
  }
  span {
    margin-top: 28px;
    font-size: 35px;
  }
}

.gridwrap {
  display: grid;
  display: grid;
  align-items: center;
  padding: 0 100px;
  width: 100%;
  height: 100%;
  //   background: pink;
  background-clip: content-box;
  column-gap: 4vw;
  // 列设置

  grid-template-columns: repeat(3, 1fr);
  // 行设置
  //   grid-template-rows: 146px 146px;
  //   column-gap: 30px;

  //   row-gap: 30px;
  //   grid-template-columns: repeat(3 1fr);
  //   grid-template-rows: repeat(3 1fr);
}
.oneitem {
  align-items: center;
  width: 100%;
  height: 60%;
  border-radius: 4px;
  background: white;
  /* 背景位置  用于设置背景图片的水平、垂直定位 */
  background-position: center;
  /* 背景尺寸   cover  contain   */
  background-size: cover;
  /* space   repeat-y  repeat  no-repeat   */
  background-repeat: no-repeat;
  box-shadow: 2px 2px 18px rgba(0, 0, 0, 0.1);
}

.oneitem:nth-of-type(1) {
  background-image: url("https://itjchome.oss-cn-shenzhen.aliyuncs.com/offweb/hover1.jpg");
}
.oneitem:nth-of-type(2) {
  background-image: url("https://itjchome.oss-cn-shenzhen.aliyuncs.com/offweb/hover2.jpg");
}
.oneitem:nth-of-type(3) {
  background-image: url("https://itjchome.oss-cn-shenzhen.aliyuncs.com/offweb/hover3.jpg");
}
</style>
